<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>材料供应商信息</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div id="parentTarget">
        <!-- 查询条件 -->
        <div class="demoTable">
            <label for="demoReload">供应商信息查询：</label>
            <div class="layui-inline">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入主要负责人">
            </div>
             <button class="layui-btn" data-type="reload">搜索</button>
        </div>
        <table id="demo" lay-filter="test"></table>
    </div>
</body>
<!--<script src="../layui/layui.js"></script>-->
<script !src="">

    layui.use(['table', 'form'], function(){
        let table = layui.table
            , form = layui.form
            , $ = layui.$;
        //表格渲染
        let tableIns = table.render({
            elem: '#demo'
            ,height : 550
            ,width : 1310
            ,url: '/su/queryAll' //数据接口
            ,page: true //开启分页
            // ,toolbar: '#toolbarDemo' //开启自定义按钮
            // ,toolbar: 'default' //开启自定义按钮
            ,toolbar: true
            ,defaultToolbar: [{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '添加'
                ,layEvent: 'add'
                ,icon: 'layui-icon-add-1'
            },{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '上传数据'
                ,layEvent: 'upload'
                ,icon: 'layui-icon-upload'
            },'filter', 'exports', 'print']
            ,cols: [[ //表头
                {fixed: 'left', type: 'checkbox', width: 50}
                ,{type: 'numbers',title: '序号'}
                ,{field: 'supplierName', title: '供应商厂名', width: 160}
                ,{field: 'address', title: '供应商地址', minWidth: 260}
                ,{field: 'phone', title: '供应商电话', minWidth: 70}
                ,{field: '', title: '主营商品', minWidth: 70,templet: '<div>{{d.mc.classificationName}}</div>'}

                ,{field: 'head', title: '主要负责人', minWidth: 50}
                ,{fixed: 'right', title: '操作', width: 200, toolbar: '#barDemo'}
            ]]
            ,parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.items //解析数据列表
                };
            }
            ,request: {
                pageName: 'currPage' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,id: 'testReload'
        });

        //按钮单击事件，条件搜索
        $('.demoTable .layui-btn').on('click', function () {
            tableIns.reload({
                where: {
                    head: $('#demoReload').val()
                }
            })
        });
        /*---------表单验证----------*/
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[\u4e00-\u9fa5]+$").test(value)){
                    return '只能输入汉字';
                }
                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if(value === 'xxx'){
                    alert('用户名不能为敏感词');
                    return true;
                }
            }
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,guige :[
                /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]*$/
                ,'只能输入汉字、数字以及字母，不能单独出现数字'
            ]
            ,cot :[
                /^([\u4e00-\u9fa5，。！a-zA-Z0-9])*$/
                ,'只能输入汉字和，。！以及字母和数字'
            ]
            ,d:[
                /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]+省[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]+市[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]+区[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]*$/
                ,'只能以省市区的形式填写'
            ]
        });


        //监听单元格事件
        //工具条事件
        table.on('tool(test)', function(obj){
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
                //向服务端发送查看详情指令
                $.post('/su/query',{'supplierId':data.supplierId},function (res) {
                    showInfo(res.data);
                    form.render();
                });
            } else if(layEvent === 'del'){ //删除
                // alert(data);
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post('/su/remove',{'supplierId':data.supplierId},function (res){
                        layer.alert(res.msg)
                        $.post('/su/queryAll')
                    });
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                //向服务端发送查看详情指令
                $.post('/su/query',{'supplierId':data.supplierId},function (res) {
                    editInfo(res.data);
                    form.render();
                });
            }
        });

        /* 弹出层 */
        /** 详情 **/
        function showInfo(data) {
            layer.open({
                type: 1
                ,area: ['1000px','600px']
                ,title: '客户信息详情'
                ,content: $('#detailPage').html()
            });
            form.val('example',{
                'supplierName': data.supplierName
                ,'address': data.address
                ,'phone': data.phone
                ,'head': data.head
                ,'classificationName': data.mc.classificationName
                ,'instructions': data.instructions
                ,'materialName' : data.mg.materialName
            });
            //表格渲染
            let tableIns = table.render({
                elem: '.formTable'
                ,width : 990
                , cols: [[ //表头
                    {field: 'specifications', title: '材料规格', minWidth: 80}
                    ,{field: 'commodityName', title: '品名', minWidth: 80}
                    // , {field: 'unit', title: '计量单位', minWidth: 80}
                    // , {field: 'goodsInfo', title: '规格信息', minWidth: 80}
                    /*,{fixed: 'right', title: '操作', width: 150, toolbar: '#barDemo'}*/
                ]]
                , data: data.specifications
                , id: 'formTable'
            });
        }
        /** 编辑 **/
        function editInfo(data) {
            let index = layer.open({
                type: 1
                ,area: ['1000px','600px']
                ,title: '材料供应商信息编辑'
                ,content: $('#editPage').html()
            });
            //赋初值
            form.val('example',{
                'supplierId': data.supplierId
                ,'supplierName': data.supplierName
                ,'address': data.address
                ,'phone': data.phone
                ,'head': data.head
                ,'classificationName': data.mc.classificationName
                ,'instructions': data.instructions
                ,'materialName' : data.mg.materialName
                ,'theMainGood' :data.theMainGood
            });
            //触发提交事件
            form.on('submit(formDemo)', function(data){
                $.post('/su/modify',form.val('example'),function (res) {
                    layer.alert(res.msg);
                    layer.close(index)
                });
                table.reload('testReload');
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //触发重置
            form.on('submit(reset)', function(){
                //赋初值
                form.val('example',{
                    'supplierId': data.supplierId
                    ,'supplierName': data.supplierName
                    ,'address': data.address
                    ,'phone': data.phone
                    ,'head': data.head
                    ,'classificationName': data.mc.classificationName
                    ,'instructions': data.instructions
                    ,'materialName' : data.mg.materialName
                    ,'theMainGood' :data.theMainGood
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

        }
        /** 添加 **/
        function addInfo(data) {
            let index = layer.open({
                type: 1
                ,area: ['1000px','600px']
                ,title: '新增客户信息'
                ,content: $('#addPage').html()
            });
            //赋初值
            form.val('example',{
                'theMainGood' :1
            });
            //触发提交事件
            form.on('submit(formDemo)', function(data){
                $.post('/su/save',form.val('example'),function (res) {
                    layer.alert(res.msg);
                    layer.close(index)
                });
                table.reload('testReload');
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //触发重置事件
            form.on('submit(reset)', function(data){
                form.reset();
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        }
        //触发事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    addInfo();
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });

    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 详情 -->
<script type="text/html" id="detailPage">
    <form class="layui-form" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">供应商厂名</label>
            <div class="layui-input-inline">
                <input type="text" name="supplierName" required lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主营商品</label>
            <div class="layui-input-inline">
                <input type="text" name="classificationName" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
<!--                <select name="classificationName" class="layui-form-select" disabled>-->
<!--                    <option value="1">钢带</option>-->
<!--                    <option value="2">钢条</option>-->
<!--                </select>-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主要负责人</label>
            <div class="layui-input-inline">
                <input type="text" name="head" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品规格</label>
            <div class="layui-input-inline">
                <input type="text" name="materialName" required  lay-verify="required|guige" autocomplete="off" class="layui-input" placeholder="必填">
<!--                <select name="theMainGood" class="layui-form-select" disabled>-->
<!--                    <option value="1">XXX名称</option>-->
<!--                    <option value="2">XX名称</option>-->
<!--                    <option value="3">X名称</option>-->
<!--                </select>-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">说明</label>
            <div class="layui-input-inline">
                <!--            <input type="text" name="instructions"  autocomplete="off" class="layui-input" placeholder="如需说明，可添写">-->
                <textarea name="instructions" cols="30" rows="10" placeholder="如需说明，可添写" disabled></textarea>
            </div>
        </div>
    </form>
    <table class="formTable" lay-filter="test"></table>
</script>
<!-- 编辑 -->
<script type="text/html" id="editPage">
    <form class="layui-form" lay-filter="example">
        <div class="layui-form-item" hidden>
            <label class="layui-form-label">供应商编号</label>
            <div class="layui-input-inline">
                <input type="text" name="supplierId" required  lay-verify="required" readonly autocomplete="off" class="layui-input" placeholder="必填">
            </div>
        </div>
        <div class="layui-form-item" hidden>
            <label class="layui-form-label">商品规格编号</label>
            <div class="layui-input-inline">
                <input type="text" name="theMainGood" required  lay-verify="required" readonly autocomplete="off" class="layui-input" placeholder="必填">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商厂名</label>
            <div class="layui-input-inline">
                <input type="text" name="supplierName" required  lay-verify="required|username"  autocomplete="off" class="layui-input" placeholder="必填" maxlength="50">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" required  lay-verify="required|d"  autocomplete="off" class="layui-input" placeholder="必填" maxlength="50">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" required lay-verify="required|phone"  autocomplete="off" class="layui-input" placeholder="必填">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主营商品</label>
            <div class="layui-input-inline">
                <input type="text" name="classificationName" required  lay-verify="required"  autocomplete="off" class="layui-input" disabled placeholder="必填">
<!--                <select name="classificationName" class="layui-form-select">-->
<!--                    <option value="1">钢带</option>-->
<!--                    <option value="2">钢条</option>-->
<!--                </select>-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主要负责人</label>
            <div class="layui-input-inline">
                <input type="text" name="head" required  lay-verify="required|username"  autocomplete="off" class="layui-input" placeholder="必填" maxlength="10">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品规格</label>
            <div class="layui-input-inline">
                <input type="text" name="materialName" required  lay-verify="required|guige" autocomplete="off" class="layui-input" placeholder="必填" maxlength="25">
<!--                <select name="theMainGood" class="layui-form-select">-->
<!--                    <option value="1">XXX名称</option>-->
<!--                    <option value="2">XX名称</option>-->
<!--                    <option value="3">X名称</option>-->
<!--                </select>-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">说明</label>
            <div class="layui-input-inline">
                <!--            <input type="text" name="instructions"  autocomplete="off" class="layui-input" placeholder="如需说明，可添写">-->
                <textarea name="instructions" cols="30" rows="10" placeholder="如需说明，可添写" lay-verify="required|cot" maxlength="50"></textarea>
            </div>
        </div>
        <div class="layui-form-item btn">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">重置</button>
            </div>
        </div>
    </form>
</script>
<!-- 添加 -->
<script type="text/html" id="addPage">
    <form class="layui-form" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">供应商厂名</label>
            <div class="layui-input-inline">
                <input type="text" name="supplierName" required  lay-verify="required|guige"  autocomplete="off" class="layui-input" placeholder="必填" maxlength="50">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" required lay-verify="required|d"  autocomplete="off" class="layui-input" placeholder="必填" maxlength="50">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" required  lay-verify="required|phone"  autocomplete="off" class="layui-input" placeholder="必填">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主营商品</label>
            <div class="layui-input-inline">
<!--                <input type="text" name="classifyId" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="必填">-->
                <select name="classifyId">
                    <option value="1">钢带</option>
                    <option value="2">钢条</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品规格</label>
            <div class="layui-input-inline">
                <!--                <input type="text" name="materialName" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="必填">-->
                <select name="theMainGood" class="layui-input" required lay-verify="required" autocomplete="off">
                    <option value="1">XXX名称</option>
                    <option value="2">XX名称</option>
                    <option value="3">X名称</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主要负责人</label>
            <div class="layui-input-inline">
                <input type="text" name="head" required  lay-verify="required|username" autocomplete="off" class="layui-input" placeholder="必填" maxlength="10">
            </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">说明</label>
            <div class="layui-input-inline">
        <!--            <input type="text" name="instructions"  autocomplete="off" class="layui-input" placeholder="如需说明，可添写">-->
                <textarea name="instructions" id="instructions" cols="30" rows="10" placeholder="如需说明，可添写" lay-verify="cot" maxlength="50"></textarea>
            </div>
        </div>
        <div class="layui-form-item btn">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">重置</button>
            </div>
        </div>
    </form>
</script>
</html>